<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美食城</title>
		<!-- 公共样式 -->
		<link type="text/css" rel="stylesheet" href="css/public.css" />
		<!-- 页面独立的 -->
		<link type="text/css" rel="stylesheet" href="css/index.css" />
		<!-- bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		
		<style></style>
	</head>
	<body>
		<!-- 顶部 -->
		<div class="top" id="top">
			<div class="top_left">
				<div class="top_leftimg">
					<img src="img/top1.png">
				</div>
				<div class="top_leftp">地址</div>
			</div>
			<div class="top_center">
				<input class="top_centersearch" name="text1" type="text" placeholder="搜索"/>
			</div>
			<div class="top_right">未登录</div>
		</div>
		<!-- 轮播图 -->
		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/swiper1.jpg" /></div>
				<div class="swiper-slide"><img src="img/swiper2.jpg" /></div>
				<div class="swiper-slide"><img src="img/swiper4.jpg" /></div>
				<div class="swiper-slide"><img src="img/swiper3.jpg" /></div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!-- 分类 -->
		<div class="classification">
			<div class="classification1">
				<div class="classification2 classification2-1">
					<img src="img/classification1.png"/>
				</div>
				<div class="classification3">火锅</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-2">
					<img src="img/classification2.png"/>
				</div>
				<div class="classification3">甜点饮品</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-3">
					<img src="img/classification3.png"/>
				</div>
				<div class="classification3">自助餐</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-4">
					<img src="img/classification4.png"/>
				</div>
				<div class="classification3">小吃快餐</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-5">
					<img src="img/classification5.png"/>
				</div>
				<div class="classification3">西餐</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-6">
					<img src="img/classification6.png"/>
				</div>
				<div class="classification3">烧烤烤肉</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-7">
					<img src="img/classification7.png"/>
				</div>
				<div class="classification3">香锅烤鱼</div>
			</div>
			<div class="classification1">
				<div class="classification2 classification2-8">
					<img src="img/classification8.png"/>
				</div>
				<div class="classification3">海鲜</div>
			</div>
		</div>
		
		<!-- 新人礼包 -->
		<div class="giftpack">
			<div class="giftpack0">
				<div class="giftpack_h">
					<div class="giftpack_h1">新人专享 抢尖货</div>
					<div class="giftpack_h2">新人专属</div>
				</div>
				<div class="giftpack_text">
					<div class="giftpack_textimg">
						<img src="img/giftpack.png"/>
					</div>
					<div class="giftpack_textli">
						<div class="giftpack_textliimg">
							<img src="img/giftpack1.jpg"/>
						</div>
						<div class="giftpack_textp">
							<div class="giftpack_textp1">补贴9元</div>
							<div class="giftpack_textp2">￥10.5</div>
						</div>
					</div>
					<div class="giftpack_textli">
						<div class="giftpack_textliimg">
							<img src="img/giftpack2.jpg"/>
						</div>
						<div class="giftpack_textp">
							<div class="giftpack_textp1">补贴15元</div>
							<div class="giftpack_textp2">￥9.9</div>
						</div>
					</div>
					<div class="giftpack_textli">
						<div class="giftpack_textliimg">
							<img src="img/giftpack3.jpg"/>
						</div>
						<div class="giftpack_textp">
							<div class="giftpack_textp1">补贴2元</div>
							<div class="giftpack_textp2">￥5.6</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 低价 -->
		<div class="lowprice">
			<div class="lowprice0">
				<div class="lowprice_h">
					<div class="lowprice_h1">
						<img src="img/lowprice_h1.jpg"/>
						<img src="img/lowprice_h2.jpg"/>
					</div>
					<div class="lowprice_h2">翻牌抽1分钱商品 ></div>
				</div>
				<div class="lowprice_text">
					<div class="lowprice_textimg">
						<img src="img/lowprice.jpg"/>
					</div>
					<div class="lowprice_textli">
						<div class="lowprice_textliimg">
							<img src="img/lowprice1.jpg"/>
						</div>
						<div class="lowprice_textp">
							<div class="lowprice_textp1">
								￥16.9
								<img src="img/lowprice0.webp"/>
							</div>
							<div class="lowprice_textp2">疯抢中</div>
						</div>
					</div>
					<div class="lowprice_textli">
						<div class="lowprice_textliimg">
							<img src="img/lowprice2.jpg"/>
						</div>
						<div class="lowprice_textp">
							<div class="lowprice_textp1">
								￥55.8
								<img src="img/lowprice0.webp"/>
							</div>
							<div class="lowprice_textp2">专享价<s>￥79.8</s></div>
						</div>
					</div>
					<div class="lowprice_textli">
						<div class="lowprice_textliimg">
							<img src="img/lowprice3.jpg"/>
						</div>
						<div class="lowprice_textp">
							<div class="lowprice_textp1">
								￥7.9
								<img src="img/lowprice0.webp"/>
							</div>
							<div class="lowprice_textp2">专享价<s>￥13.9</s></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 商品 -->
		<div class="recommend">
			<div class="recommend_li">
				<div class="recommend_liimg1">
					<img src="img/recommend4.jpg"/>
				</div>
				<div class="recommend_text">
					<div class="recommend_textp1">广州酒家利口福 嫩牛尊品芝士船蒸烤披萨85g*2 早餐晚餐 速冻食品 懒人速食 下午茶</div>
					<div class="recommend_textp2">满1件，总价打9.5折；满2件，总价打6...</div>
					<div class="recommend_textp3">￥<span>24</span>.9</div>
				</div>
				<div class="recommend_liimg2">
					<img src="img/recommend.avif"/>
				</div>
			</div>
			<div class="recommend_li">
				<div class="recommend_liimg1">
					<img src="img/recommend3.jpg"/>
				</div>
				<div class="recommend_text">
					<div class="recommend_textp1">CP正大食品(CP) 风情骨肉 1kg  白羽鸡 半成品 鸡架 奥尔良风味</div>
					<div class="recommend_textp2">好评率99%</div>
					<div class="recommend_textp3">￥<span>19</span>.9</div>
				</div>
				<div class="recommend_liimg2">
					<img src="img/recommend.avif"/>
				</div>
			</div>
			<div class="recommend_li">
				<div class="recommend_liimg1">
					<img src="img/recommend2.jpg"/>
				</div>
				<div class="recommend_text">
					<div class="recommend_textp1">思念腊汁肉饼陕西风味880g8个半成品早餐速食速冻食品生鲜</div>
					<div class="recommend_textp2">好评率99%</div>
					<div class="recommend_textp3">￥<span>34</span>.9</div>
				</div>
				<div class="recommend_liimg2">
					<img src="img/recommend.avif"/>
				</div>
			</div>
			<div class="recommend_li">
				<div class="recommend_liimg1">
					<img src="img/recommend1.jpg"/>
				</div>
				<div class="recommend_text">
					<div class="recommend_textp1">田牧悠致抹茶味鲜奶冰淇淋67g*6支不加一滴水牛奶雪糕生牛乳冰激凌</div>
					<div class="recommend_textp2">满1件，总价打8折；满2件，总价打6...</div>
					<div class="recommend_textp3">￥<span>73</span>.9</div>
				</div>
				<div class="recommend_liimg2">
					<img src="img/recommend.avif"/>
				</div>
			</div>
		</div>
		
		<!-- 底部空白 -->
		<div class="bottomblank"></div>
		
		<!-- 底部 -->
		<div class="bottom">
			<a href="index.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom1.png" />
				</div>
				<div class="bottom_lip">首页</div>
			</a>
			<a href="classification2.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom2.png" />
				</div>
				<div class="bottom_lip">分类</div>
			</a>
			<a href="shopping3.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom3.png" />
				</div>
				<div class="bottom_lip">购物</div>
			</a>
			<a href="person4.html" class="bottom_li">
				<div class="bottom_liimg">
					<img src="img/bottom4.png" />
				</div>
				<div class="bottom_lip">我的</div>
			</a>
		</div>
		
	</body>
</html>
<!-- bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- jquery  -->
<script src="js/jquery.min.js"></script>
<!-- wow.js -->
<script src="js/wow.min.repeat.js"></script>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>

<script>
	//实例化wow.js
	new WOW().init()

	//锚点跳转滑动效果  
	$('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function() {
		if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this
			.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body').animate({
					scrollTop: targetOffset
				}, 1000);
				return false;
			}
		}
	});

	//给页面绑定一个滚动条事件
	$(document).scroll(function() {
		//获取滚动条滚动长度大小
		var distance = $(this).scrollTop()

		// 	当滚动条滚动的长度大于150
		if (distance > 150) {
			// 显示返回顶部
			$("#gotop").css({
				zIndex: 99998,
				opacity: 1
			});
		} else {
			// 隐藏返回顶部
			$("#gotop").css({
				zIndex: -99998,
				opacity: 0
			});
		}
	})
	
	// 轮播图
	var swiper = new Swiper(".mySwiper", {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});
</script>